<template>
  <div class="gedanMain">
    <div
      class="image-text"
      v-for="(item, index) in playlist"
      :key="index"
      @click="$router.push({path:'/playlist/'+item.id})"
      :style="{width:width,height:height}" 
    >
      <div class="bg">
        <img src="../../assets/headset.png" />
        {{item.playCount | playCount}}
      </div>
      <img class="song_img" v-lazy="item.coverImgUrl"  />
      <div class="sub" v-if="item.creator">
        <img class="xiaoren" src="../../assets/xiaoren.png" />
        <a>{{item.creator.nickname}}</a>
      </div>
      <img class="play animated fadeIn" src="../../assets/play2.png" />
      <p>{{item.name}}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    playlist: { type: Array, required: true },
    width:{default:"180px"},
    height:{default:"180px"}
   
  }
};
</script>

<style lang="less" scoped>
.gedanMain {
  display: flex;
  height: inherit;
  flex-wrap: wrap;
  margin-right:-19px;
  .image-text {
    position: relative;
    width: 180px;
    height: 235px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 17px;
    .play {
      width: 27px;
      height: 27px;
      position: absolute;
      right: 5px;
      bottom: 60px;
      display: none;
    }
    &:hover .play {
      display: inline;
    }
    .sub {
      position: absolute;
      bottom: 60px;
      left: 10px;

      font-size: 10px;
      a {
        color: white;
        margin-left: 10px;
      }
    }
    .xiaoren {
      width: 10px;
      height: 10px;
    }

   
    .bg {
      position: absolute;
      height: 20px;
      width: inherit;
      text-align: right;
      color: white;
      font-size: 11px;
      padding-right: 5px;
      background: linear-gradient(
        to left,
        rgba(100, 100, 100, 0.9),
        rgba(255, 255, 255, 0.1)
      );
      /* 标准的语法 */
      img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
      }
    }

    .song_img {
      width: inherit;
      
      border: 1px solid #e6e6e6;
    }
    p {
      font-size: 14px;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>